<template>
  <header class="nav">
    <span @click="$back">
      <el-icon color="#b5bac8" size="26"><Back /></el-icon>
    </span>
    <ul>
      <li>
        <img src="@/assets/img/mylrft.png" alt="" />
        <span>{{ $t("language.hotgame.money") }}0.00</span>
        <el-icon color="#fff"><Plus /></el-icon>
      </li>
      <li @click="$openPage('/rechange')">
        {{ $t("language.hotgame.btnright") }}
      </li>
    </ul>
  </header>
  <div style="height: 40px"></div>

  <div class="hotbox">
    <div class="title">
      <Skeleton :loading="loadings">
        <template #ske>
          <div
            style="
              width: 100%;
              display: flex;
              justify-content: flex-start;
              align-items: center;
            "
          >
            <van-skeleton-avatar style="width: 30px; height: 30px" />
            <van-skeleton-paragraph
              style="width: 34%; height: 30px; margin-left: 20px"
            />
          </div>
        </template>
        <template #main>
          <img src="@/assets/img/nav3-9.png" alt="" />
          <strong>{{ name }}</strong></template
        >
      </Skeleton>
    </div>
    <div class="expend">
      <Skeleton :loading="loadings">
        <template #ske>
          <div
            style="
              width: 100%;
              display: flex;
              justify-content: flex-start;
              flex-direction: column;
              align-items: center;
            "
          >
            <div
              style="
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <van-skeleton-paragraph style="width: 32%; height: 40px" />
              <van-skeleton-paragraph style="width: 32%; height: 40px" />
              <van-skeleton-paragraph style="width: 32%; height: 40px" />
            </div>
            <div
              style="
                width: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
              "
            >
              <van-skeleton-paragraph
                style="width: 100%; height: 40px; margin-top: 10px"
              />
            </div>
          </div>
        </template>
        <template #main>
          <div>
            <el-select
              v-model="value"
              class="select"
              popper-class="downselect"
              placeholder="Provedor"
              size="large"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select
              v-model="value"
              class="select"
              popper-class="downselect"
              placeholder="Tags"
              size="large"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-select
              v-model="value"
              class="select"
              popper-class="downselect"
              placeholder="Jogar"
              size="large"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div>
            <el-input
              prefix-icon="Search"
              v-model="value1"
              class="search"
              size="large"
              placeholder=""
            /></div
        ></template>
      </Skeleton>
    </div>
    <ul class="hot">
      <li class="clist">
        <div class="clist-item">
          <dl>
            <dd v-for="(item, index) in clist" :key="index">
              <Skeleton :loading="loadings">
                <template #ske>
                  <div style="width: 100%">
                    <van-skeleton-title style="width: 80%" />
                    <van-skeleton-image
                      style="width: 100%; height: 170px; margin-top: 10px"
                    />
                  </div>
                </template>
                <template #main>
                  <div class="item-center">
                    <span>{{ item.name }}</span>
                    <div>
                      <img
                        class="target"
                        v-lowlazy="getImg('ha1.png')"
                        src=""
                        alt=""
                      />
                      <img v-lazy="getImg(item.img)" alt="" />
                    </div>
                  </div>
                </template>
              </Skeleton>
            </dd>
          </dl>
        </div>
      </li>
    </ul>
    <strong class="btnv">{{ $t("language.hotgame.btnv") }}</strong>
    <div class="clist-itemp">
      <h4>
        <div>
          <img v-lazy="getImg('ha1.png')" src="" alt="" />
          <strong>{{ $t("language.module1") }}</strong>
        </div>
        <div>
          <el-icon color="#fff" size="20"><ArrowRight /></el-icon>
        </div>
      </h4>
      <dl>
        <dd v-for="(item, index) in citem" :key="index">
          <Skeleton :loading="loadings">
            <template #ske>
              <div style="width: 100%">
                <van-skeleton-title style="width: 80%" />
                <van-skeleton-image
                  style="width: 100%; height: 170px; margin-top: 10px"
                />
              </div>
            </template>
            <template #main>
              <div class="item-center">
                <span>{{ item.name }}</span>
                <div>
                  <img
                    class="target"
                    v-lazy="getImg('ha1.png')"
                    src=""
                    alt=""
                  />
                  <img v-lazy="getImg(item.img)" alt="" />
                </div>
              </div>
            </template>
          </Skeleton>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, nextTick, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const name = route.query.name;
const getImg = (url) => {
  return new URL(`../../../assets/img/${url}`, import.meta.url).href;
};
let loadings = ref(true);
onMounted(() => {
  nextTick(() => {
    // loadings.value = false;
    let time = setInterval(() => {
      loadings.value = false;
      clearInterval(time);
    }, 500);
  });
});

const value = ref("");
const value1 = ref("");

const options = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
let clist = reactive([
  {
    name: "Fortune Tiger",
    img: "img1.png",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "game_02.png",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "game_03.png",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "game_04.png",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "game_06.png",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "game_05.png",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "c1.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "c2.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "c3.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "c4.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "c5.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "c6.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "c7.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "c8.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "c9.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "c10.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "c11.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "c6.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "b1.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "b2.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "b3.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "b5.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "b5.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "b6.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "c13.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "c14.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "c15.jpg",
    topleft: "topleft.png",
  },

  {
    name: "Fortune Tiger",
    img: "d1.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "d2.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "d3.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "d4.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "d5.jpg",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "d6.jpg",
    topleft: "topleft.png",
  },
]);
let citem = reactive([
  {
    name: "Fortune Tiger",
    img: "img1.png",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "game_02.png",
    topleft: "topleft.png",
  },
  {
    name: "Fortune Tiger",
    img: "game_03.png",
    topleft: "topleft.png",
  },
]);
</script>
<style lang="scss">
.downselect {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  .is-focus,
  .el-input__inner {
    border-color: #0a906c !important;
  }
  .el-select__wrapper {
    color: #fff !important;
  }
  .el-select__selected-item span {
    color: #fff !important;
  }

  .el-scrollbar__view {
    background-color: rgb(39, 42, 48) !important;
    color: #fff !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  .el-scrollbar__wrap {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  .el-select-dropdown {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background-color: rgb(50, 53, 62) !important;
  }
  .el-select-dropdown__list {
    background-color: rgb(50, 53, 62) !important;
    color: #fff !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
  }
  .el-popper__arrow::before {
    background-color: rgb(50, 53, 62) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }
  /* 当select元素获得焦点时的样式 */
  .el-input__inner.is-focused {
    border-color: rgb(0, 144, 109) !important;
  }
  .el-select-dropdown__item.selected {
    color: #fff !important;
    background-color: rgb(39, 42, 48) !important;
  }
  .el-input.is-focus .el-input__inner {
    border-color: #0a906c !important;
  }
  .el-select-dropdown__item.selected {
    color: #fff !important;
    background-color: rgb(50, 53, 62) !important;
  }
  .el-select-dropdown__item {
    background-color: rgb(50, 53, 62) !important;
    color: #b9bdc9 !important;
  }

  .el-select-dropdown__item:hover {
    color: #fff !important;
  }
}
</style>
<style lang="scss" scoped>
header {
  @include flex(row, space-between, center);
  height: 40px;
  padding: 0 10px;
  background-color: rgb(36, 39, 42);
  position: fixed;
  width: 100%;
  z-index: 9999;
  left: 0;
  top: 0;
  > span {
    width: 28px;
    height: 28px;
    border: 2px solid #b5bac8;
    display: block;
    border-radius: 16px;
    @include flex(row, center, center);
  }
  ul {
    height: 100%;
    @include flex(row, flex-end, center);
    li {
      border-radius: 5px;
      @include flex(row, center, center);
      height: 30px;
      padding: 0 10px;
      img {
        width: 16px;
      }
      span {
        color: #fff;
        font-size: 14px;
        display: block;
        margin: 0 4px;
      }
    }
    li:nth-child(1) {
      background-color: #31353e;
    }
    li:nth-child(2) {
      margin-left: 10px;
      background-image: linear-gradient(-30deg, #835eef, #926ef9),
        linear-gradient(#2d3035, #2d3035);
      color: #fff;
      font-size: 16px;
    }
  }
}

.hotbox {
  width: 100%;
  .expend {
    width: 100%;
    padding: 0 10px;
    > div {
      margin-bottom: 10px;
    }
    > div:nth-child(1) {
      @include flex(row, space-between, center);

      .select + .select {
        margin-left: 10px;
      }
    }
    :deep(.el-select__wrapper) {
      background-color: rgb(39, 42, 48);
      box-shadow: none;
      border: 1px solid #4a4c53;
      border-radius: 10px;
    }

    :deep(.el-input__wrapper) {
      background-color: rgb(39, 42, 48);
      border-radius: 10px;
      box-shadow: none;
      border: 1px solid #4a4c53;
      height: 40px;
    }
  }
  .title {
    padding: 0 10px;
    @include flex(row, flex-start, center);
    margin: 30px 0;
    img {
      width: 30px;
      margin-right: 15px;
    }
    strong {
      font-size: 30px;
      color: #b5bac8;
    }
  }
  .btnv {
    margin: 30px auto 40px;
    display: block;
    width: 150px;
    height: 32px;
    line-height: 32px;
    background-color: #0c8560;
    border-radius: 5px;
    text-align: center;
    font-weight: normal;
    font-size: 14px;
    color: #fff;
  }
  .hot {
    width: 100%;
    height: 100%;
    padding: 20px 0px 0px;
    .navbar {
      width: 100vw;
      height: 40px;
      position: fixed;
      z-index: 99999;
      top: 0;
      left: 0;
    }

    .clist {
      width: 100%;
      .clist-item {
        padding: 0 10px;
        width: 100%;
        background-size: cover;

        dl {
          @include flex(row, space-between, flex-start);
          width: 100%;
          flex-wrap: wrap;
          dd {
            margin: 12px 0 0 0;
            span {
              font-size: 16px;
              color: #b5bac8;
              display: block;
              margin-bottom: 10px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            div {
              position: relative;
              img {
                width: 100%;
                height: 100%;
                border-radius: 10px;
              }
              .target {
                position: absolute;
                top: 0;
                right: 0;
                width: 50px;
                height: 40px;
              }
            }

            width: 31%;
          }
        }
      }
      .clist-item + .clist-item {
        margin-top: 10px;
      }
    }
  }
  .clist-itemp {
    padding: 0 10px;
    width: 100%;
    h4 {
      @include flex(row, space-between, center);
      height: 40px;
      div:nth-child(1) {
        @include flex(row, flex-start, center);
        height: 100%;
        img {
          width: 24px;
          height: 24px;
          margin-right: 10px;
        }

        strong {
          font-size: 20px;
          color: #fff;
        }
      }
      div:nth-child(2) {
      }
    }
    dl {
      @include flex(row, space-between, flex-start);
      width: 100%;
      flex-wrap: wrap;
      dd {
        margin: 12px 0 0 0;
        span {
          font-size: 16px;
          color: #fff;
          display: block;
          margin-bottom: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        div {
          position: relative;
          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
          }
          .target {
            position: absolute;
            top: 0;
            right: 0;
            width: 50px;
            height: 40px;
          }
        }

        width: 31%;
      }
    }
  }
}
</style>
